<template lang="html">
  <el-drawer
    title="数据权限"
    direction="rtl"
    size="800px"
    :wrapperClosable="false"
    :visible="dialogVisible"
    class="user-draw"
    @close="close"
  >
    <div v-loading="wrapperLoading" class="draw-wrapper draw-loading-wrapper">
      <el-form ref="ruleForm" label-width="80px" label-suffix=":" class="m5" label-position="top">
        <el-form-item class="justify-label">
          <add-person ref="addPerson" />
        </el-form-item>
        <title-line title="数据权限" class="mb15" />
        <el-form-item class="justify-label">
          <el-radio-group v-model="userPermObj.type" @change="radioChange">
            <el-radio
              v-for="(item, index) in dataPermissionTypeOptions"
              :key="index"
              :label="item.value"
              :class="{
                'last-label': index === dataPermissionTypeOptions.length - 1,
              }"
              >{{ item.name }}</el-radio
            >
            <el-button v-if="userPermObj.type === '4'" type="text" class="ptb0" @click="doModify"
              >修改</el-button
            >
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div class="mt10" flex="dir:right">
        <el-button type="primary" :loading="btnLoading" @click="submitData">确定</el-button>
        <el-button class="mr10" @click="close">取消</el-button>
      </div>
    </div>
    <!-- 数据权限弹窗 -->
    <data-access-dialog
      :dialogVisible.sync="dataAccessDialogVisible"
      @success="dataAccessSuccess"
    />
  </el-drawer>
</template>

<script>
import dialogMixin from "mixins/dialogMixin";
import AddPerson from "./../add-person";
import { UserOrgPermBatch } from "api/sys/user";
import { DictKeys } from "api/sys/dict";
import DataAccessDialog from "../data-access-dialog";
export default {
  components: { DataAccessDialog, AddPerson },
  mixins: [dialogMixin],
  props: {
    // 选中的数据
    multipleSelection: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dataAccessDialogVisible: false,
      // 数据权限类型配置文件
      dataPermissionTypeOptions: [],
      // 数据权限
      userPermObj: {
        type: "1",
        deptIds: [],
      },
    };
  },
  methods: {
    /**
     * 初始化弹窗
     */
    async initForm() {
      this._DictKeys();
      await this.$nextTick();
      this.$refs.addPerson && this.$refs.addPerson.initPersonArr(this.multipleSelection);
    },
    /**
     * 提交
     */
    submitData() {
      try {
        this.dataValidate();
        this._UserOrgPermBatch();
      } catch (e) {
        this.$message.error(e.message);
      }
    },

    /**
     * 数据权限的切换
     */
    radioChange(val) {
      this.userPermObj.type = val;
    },
    // 修改
    doModify() {
      this.dataAccessDialogVisible = true;
    },
    /**
     * 数据权限弹窗回调
     */
    dataAccessSuccess(val) {
      const { checkedKeys } = val;
      this.userPermObj.deptIds = checkedKeys;
    },
    /**
     * 数据验证
     */
    dataValidate() {
      const uidList = this.$refs.addPerson.getUidList();
      if (!uidList.length) {
        throw new Error("请选择人员");
      }
      this.uidList = uidList;
    },

    /**
     * 获取数据字典
     */
    async _DictKeys() {
      try {
        this.wrapperLoading = true;
        const tempArr = ["data_permission_type"];
        const data = await DictKeys(tempArr.join());
        if (data) {
          const { data_permission_type: dataPermissionType } = data;
          this.dataPermissionTypeOptions = dataPermissionType;
        }
      } catch (e) {
        console.log(e);
      } finally {
        this.wrapperLoading = false;
      }
    },
    /**
     * 接口提交
     */
    async _UserOrgPermBatch() {
      try {
        this.btnLoading = true;
        await UserOrgPermBatch(this.getSubmitParams());
        this.$message.success("数据权限配置成功");
        this.$emit("success");
        this.close();
      } catch (e) {
        console.log(e);
      } finally {
        this.btnLoading = false;
      }
    },
    /**
     * 获取提交参数
     */
    getSubmitParams() {
      return {
        uidList: this.uidList,
        userPerm: this.userPermObj,
      };
    },
  },
};
</script>

<style lang="scss">
.user-draw {
  .el-radio__label {
    font-size: 12px !important;
  }
  .el-checkbox__label {
    font-size: 13px !important;
  }
  .el-form-item.is-required:not(.is-no-asterisk)
    .el-form-item__label-wrap
    > .el-form-item__label:before,
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: "";
    margin-right: 0;
  }
  .data-auth-label {
    .text {
      &:before {
        content: "*";
        margin-right: 4px;
        color: #f56c6c;
      }
    }
  }
  .justify-label {
    .el-form-item__label {
      display: block !important;
    }
  }
  .el-tag {
    margin-right: 10px;
  }
}
</style>
